<script lang="ts" setup>
// import { TypographyText } from "ant-design-vue";
// import 'ant-design-vue/es/typography/style/css';
defineProps<{
  img: string
  tag: string
  name: string
  series: string
  price: string
  size: string
  link: string
  stock: string
  brand: string
}>()

const dialogVisible = ref(false)

function handleShow() {
  dialogVisible.value = true
}

</script>

<template>
  <Badge :value="tag">
    <el-card :body-style="{ padding: '0px' }">
      <el-icon style="position: absolute; right: 0;" @click="handleShow">
        <i-ep-info-filled />
      </el-icon>
      <img v-bind="$attrs" :src="img" class="image" />
      <div style="padding: 14px">
        <a-typography-text class="title" ellipsis :content="name" />
        <div class="bottom">
          <a-typography-text class="info" ellipsis :content="series" />
        </div>
        <div class="bottom right">
          <span type="text" class="price">￥{{ price }}</span>
        </div>
      </div>
    </el-card>
  </Badge>

  <el-dialog v-model="dialogVisible" width="100%">
    <img :src="img" class="image" />
    <div><strong>{{ name }}</strong></div>
    <div>{{ brand }}</div>
    <div>{{ series }}</div>
    <div>{{ size }}</div>
    <div>
      <el-link type="primary" :href="link" target="_blank">
        购买链接
        <el-icon class="el-icon--right">
          <i-ep-d-arrow-right />
        </el-icon>
      </el-link>
    </div>
    <div class="bottom">
      <span type="text">库存: {{ stock }}</span>
      <span type="text" class="price">￥{{ price }}</span>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
$font-size: var(--el-font-size-extra-small);

.image {
  width: 100%;
  display: block;
}

.title,
.info,
.price {
  font-size: $font-size;
}

.info {
  color: var(--el-color-info);
}

.price {
  color: var(--el-color-warning);
}

.bottom {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.right {
    justify-content: flex-end;
  }
}
</style>
